<template>
	<div id="account">
		<nav-tab activeColor="#101010">
			<header-item>
				<div class="header-nav1" slot="header-img" @click="fanhui">
					<van-icon name="arrow-left" size="25px" color="#ffffff" />
				</div>
				<div class="header-nav2" slot="header-sc">
					<div style="font-size: 18px;color: #FFFFFF;">账户总览</div>
				</div>
				<div class="header-nav3" slot="header-xingx">
					<van-icon name="more-o" size="25px" color="#ffffff" />
				</div>
			</header-item>
		</nav-tab>
		<div class="zhangh-context">
			<div class="context-top">
				<div>10,000,000.00</div>
				<span>总资产(元)</span>
				<van-cell-group :border="false">
					<van-cell title="" is-link :border="false">
						<div slots="value" class="context-top-value">财富体验</div>
					</van-cell>
				</van-cell-group>
			</div>
			<div class="codeflex">
				<div class="codeflex-item">
					<div>1,194.35</div>
					<span>昨天收益(元)</span>
				</div>
				<div class="codeflex-item">
					<div>1,194.35</div>
					<span>昨天收益(元)</span>
				</div>
			</div>
		</div>
		<div class="huoqi">
			<div class="cellbox">
				<div class="circular"></div>
				<div class="cellbox-tis">活期</div>
			</div>
			<div class="cellheight">
				<div class="cellheight-left">人民币</div>
				<div class="cellheight-center">100,1000,000.00</div>
				<div class="cellheight-right">
					<van-icon name="arrow" />
				</div>
			</div>
			<div class="cellheight2">
				<div class="cellheight-left">6214 **** **** 3456</div>
				<div class="cellheight-center">5,000,000.00</div>
				<div class="cellheight-right">
					<van-icon name="arrow" />
				</div>
			</div>
			<div class="cellheight2">
				<div class="cellheight-left">6225 **** **** 1234</div>
				<div class="cellheight-center">5,000,000.00</div>
				<div class="cellheight-right">
					<van-icon name="arrow" />
				</div>
			</div>

		</div>
		<div class="huoqi2">
			<div class="cellbox">
				<div class="circular"></div>
				<div class="cellbox-tis">活期</div>
			</div>
			<div class="cellheight">
				<div class="cellheight-left">朝朝盈</div>
				<div class="cellheight-center">100,1000,000.00</div>
				<div class="cellheight-right">
					<van-icon name="arrow" />
				</div>
			</div>
		</div>
		<div class="huoqi3">
			<div class="cellbox">
				<div class="circular"></div>
				<div class="cellbox-tis">欠债</div>
			</div>

			<div class="cellheight2">
				<div class="cellheight-left">信用卡个人消费账户</div>
				<div class="cellheight-center">0.00</div>
				<div class="cellheight-right">
					<van-icon name="arrow" />
				</div>
			</div>
			<div class="cellheight">
				<div class="cellheight-left">本期剩余应还人民币</div>
				<div class="cellheight-center">0.00
					<div class="hkr">还款日:2017-05-07</div>
				</div>
				<div class="cellheight-right">
					<van-icon name="arrow" />
				</div>
			</div>
			<div class="cellheight">
				<div class="cellheight-left">本期剩余应还美元</div>
				<div class="cellheight-center">$0.00
					<div class="hkr">还款日:2017-05-07</div>
				</div>
				<div class="cellheight-right">
					<van-icon name="arrow" />
				</div>
			</div>
			<div class="cellheight2">
				<div class="cellheight-left">6225 **** **** 1234</div>
				<div class="cellheight-center">5,000,000.00</div>
				<div class="cellheight-right">
					<van-icon name="arrow" />
				</div>
			</div>

		</div>
		<div class="nav-footer">
			说明：

			<p>1、资产负债信息供参考，且不含银保通和延期黄金市值，请以实际信息为准。</p>

			<p>2、一卡通账户如有外币资产，将会被折算成人民币资产统计。外币资产折算汇率查询</p>

			<p>3、信用卡如有美元账单，将会折算成人民币负债计入到总负债中。</p>
		</div>
	</div>
</template>

<script>
	import NavTab from '@/components/navtar/Header.vue'
	import HeaderItem from '@/components/navtar/HeaderItem.vue'
	import {
		Icon,
		Cell,
		CellGroup,
		Button,
	} from 'vant';
	export default {
		methods: {
			fanhui() {
				this.$router.go(-1)
			},
		},
		components: {
			NavTab,
			HeaderItem,
			[Icon.name]: Icon,
			[Cell.name]: Cell,
			[CellGroup.name]: CellGroup,
			[Button.name]: Button,
		}
	}
</script>

<style scoped lang="less">
	@mt: 9px;
	@back: #ffffff;

	#account {
		width: 100vw;
		background-color: rgb(240, 240, 240);
		padding-bottom: 70px;
	}

	.zhangh-context {
		margin-top: 44px;
		height: 184px;
		background: #101010;

		.context-top {
			height: 115px;
			// background-color: red;
			text-align: center;
			padding-top: 20px;
			box-sizing: border-box;

			>div {
				font-size: 30px;
				color: #ffffff;
			}

			span {
				font-size: 13px;
				color: #919191;
			}

			.context-top-value {
				font-size: 15px;
				color: #FEFEFE;
			}

			/deep/.van-cell {
				background-color: #101010;
				margin-top: 10px;
				border: 1px solid #101010;
			}

			.van-icon-arrow::before {
				color: white;
			}

		}

		.codeflex {
			height: 60px;
			margin-top: 10px;
			display: flex;

			.codeflex-item {
				flex: 1;
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
				font-size: 15px;
				color: #FEFEFE;

				span {
					font-size: 14px;
					color: #7E7E7E;
				}

				&:nth-child(1)::after {
					content: "";
					width: 1px;
					height: 38px;
					background-color: #CCCCCC;
					position: absolute;
					left: 50%;
				}
			}

		}
	}

	.huoqi {
		height: 195px;
		background-color: @back;
		margin-top: @mt;

		.cellbox {
			height: 45px;
			border-bottom: 1px solid #f2f2f2;
			display: flex;
			align-items: center;
			padding: 0 10px;
			box-sizing: border-box;

			.circular {
				width: 22px;
				height: 22px;
				background-color: #0083C8;
				margin-right: 12px;
				border-radius: 50%;
			}

			.cellbox-tis {
				font-size: 20px;
				color: #101010;
			}
		}

		.cellheight {
			display: flex;
			align-items: center;
			height: 60px;
			color: #101010;
			text-align: center;
			border-bottom: 1px solid #f2f2f2;

			.cellheight-left {
				font-size: 16px;
				text-align: left;
				margin-left: 20px;
				flex: 5;

			}

			.cellheight-center {
				font-size: 18px;
				flex: 5;
				text-align: right;
			}

			.cellheight-right {
				font-size: 15px;
				color: #CECECE;
				flex: 1;
			}
		}

		.cellheight2 {
			display: flex;
			align-items: center;
			height: 45px;
			color: #101010;
			text-align: center;
			border-bottom: 1px solid #f2f2f2;

			.cellheight-left {
				font-size: 16px;
				flex: 5;

			}

			.cellheight-center {
				font-size: 18px;
				flex: 5;
				text-align: right;
			}

			.cellheight-right {
				font-size: 15px;
				color: #CECECE;
				flex: 1;
			}
		}
	}

	.huoqi2 {
		height: 105px;
		background-color: @back;
		margin-top: @mt;

		.cellbox {
			height: 45px;
			border-bottom: 1px solid #f2f2f2;
			display: flex;
			align-items: center;
			padding: 0 10px;
			box-sizing: border-box;

			.circular {
				width: 22px;
				height: 22px;
				background-color: #00C29C;
				margin-right: 12px;
				border-radius: 50%;
			}

			.cellbox-tis {
				font-size: 20px;
				color: #101010;
			}
		}

		.cellheight {
			display: flex;
			align-items: center;
			height: 60px;
			color: #101010;
			text-align: center;
			border-bottom: 1px solid #f2f2f2;

			.cellheight-left {
				font-size: 16px;
				text-align: left;
				margin-left: 20px;
				flex: 5;

			}

			.cellheight-center {
				font-size: 18px;
				flex: 5;
				text-align: right;
			}

			.cellheight-right {
				font-size: 15px;
				color: #CECECE;
				flex: 1;
			}
		}

	}

	.huoqi3 {
		height: 260px;
		background-color: @back;
		margin-top: @mt;

		.cellbox {
			height: 45px;
			border-bottom: 1px solid #f2f2f2;
			display: flex;
			align-items: center;
			padding: 0 10px;
			box-sizing: border-box;

			.circular {
				width: 22px;
				height: 22px;
				background-color: #FF783E;
				margin-right: 12px;
				border-radius: 50%;
			}

			.cellbox-tis {
				font-size: 20px;
				color: #101010;
			}
		}

		.cellheight {
			display: flex;
			align-items: center;
			height: 60px;
			color: #101010;
			text-align: center;
			border-bottom: 1px solid #f2f2f2;

			.cellheight-left {
				font-size: 16px;
				text-align: left;
				margin-left: 20px;
				flex: 5;

			}

			.cellheight-center {
				font-size: 18px;
				flex: 5;
				text-align: right;

				.hkr {
					font-size: 14px;
					color: #A5A5A5;
				}
			}

			.cellheight-right {
				font-size: 15px;
				color: #CECECE;
				flex: 1;
			}
		}

		.cellheight2 {
			display: flex;
			align-items: center;
			height: 45px;
			color: #101010;
			text-align: center;
			border-bottom: 1px solid #f2f2f2;

			.cellheight-left {
				font-size: 16px;
				flex: 5;

			}

			.cellheight-center {
				font-size: 18px;
				flex: 5;
				text-align: right;
			}

			.cellheight-right {
				font-size: 15px;
				color: #CECECE;
				flex: 1;
			}
		}
	}

	.nav-footer {
		// width: 341px;
		height: 134px;
		margin: 0 auto;
		color: #969696;
		font-size: 15px;
		margin-top: 20px;
         padding: 0 26px;
		 box-sizing: border-box;
		p {
			margin: 10px;
		}
	}
</style>
